<template>
  <div class="template-management">
    <el-card class="box-card">
    <!-- Info Banner -->
    <div class="info-banner">
      <i class="el-icon-info" style="color: #0d73fc; font-size: 16px"></i>
      <span style="font-size: 14px">每个应用账认最多支持创建2000个模版。如需扩大配额，请通过工单系统或者联系客服为您处理。</span>
    </div>


    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="创建时间起" prop="startTime">
        <el-date-picker clearable
                        v-model="queryParams.startTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="创建时间止" prop="endTime">
        <el-date-picker clearable
                        v-model="queryParams.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择任务启动时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="模版名称" prop="templateName">
        <el-input
          v-model="queryParams.templateName"
          placeholder="请输入模版名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="模版ID" prop="templateId">
        <el-input
          v-model="queryParams.templateId"
          placeholder="请输入模版ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >添加模版</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除模版</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--        >下载导入模版</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--        >批量导入</el-button>-->

<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <i class="el-icon-info" style="color: #5a5e66;font-size: 14px" ></i>-->
<!--        <span class="quota-text">单次导入人数据不能超过500条</span>-->
<!--      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- Table Section -->
    <el-table v-loading="loading" :data="HwSmsTemplateResp" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="模版名称" align="left" prop="template_name" show-overflow-tooltip/>

      <el-table-column label="模版主键ID" align="left" prop="id" show-overflow-tooltip/>
      <el-table-column label="模版ID" align="left" prop="template_id" show-overflow-tooltip />
      <el-table-column label="所属应用" align="left" prop="app_name" width="110"/>
      <el-table-column label="所属签名" align="left" prop="app_name" v-if="false" />
      <el-table-column label="模版类型" align="left" prop="template_type" width="100">
        <template slot-scope="scope">
          {{ scope.row.template_type == 1 ? '普通短信' : scope.row.template_type == 2 ? '智能短信' : scope.row.template_type }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="create_time" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.create_time, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="110">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sms_template_status" :value="scope.row.flow_status" />
        </template>
      </el-table-column>
      <el-table-column label="催审状态" align="center" prop="urge_status" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sms_urge_status" :value="scope.row.urge_status" />
        </template>
      </el-table-column>
      <el-table-column label="催审时间" align="center" prop="urge_time" width="180" show-overflow-tooltip/>
      <el-table-column label="审核说明" align="center" prop="review_desc" show-overflow-tooltip width="200"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
<!--          <el-dropdown size="medium" @command="(command) => handleCommand(command, scope.row)" class="rbt"-->
<!--                       style="margin-right: 8px;">-->
<!--            <el-button size="mini" type="text" icon="el-icon-d-arrow-right" style="">更多操作</el-button>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item command="handleResetxg" icon="el-icon-setting"-->
<!--                                v-hasPermi="['crm:business:edit']">修改</el-dropdown-item>-->
<!--              <el-dropdown-item command="handleAuthsc" icon="el-icon-delete">删除</el-dropdown-item>-->
<!--              <el-dropdown-item command="handleAuthfp" icon="el-icon-user"-->
<!--                                v-hasPermi="['crm:business:edit']">分配</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.offset"
      :limit.sync="queryParams.limit"
      @pagination="getList"
    />
    </el-card>
    <!-- 添加或修改消息群发任务对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <div class="tip">
        <p class="text-sm text-blue-700">
          <span class="font-bold">1.</span> 【重要通知】关于客户欠费后消息&消息服务调整的通知。若您的华为云账号欠费，消息服务将冻结暂停。
        </p>
        <p class="text-sm text-blue-700">
          <span class="font-bold">2.</span> 为降低因客户自身业务被盗刷消息等引起的损失,平台对消息发送量进行阈值管理,请前往流量阈值管理查看平台初始值是否满足当前业务需求。
        </p>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="12">
        <el-form-item label="模版名称" prop="templateName">
          <el-input v-model="form.templateName" placeholder="请输入名称，不超过30个字符" />
        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="模版类型" prop="templateType">
          <el-select v-model="form.templateType" placeholder="请选择类型">
            <el-option label="普通短信" value="1" />
            <el-option label="智能短信" value="2" />
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="12">
        <el-form-item label="所属应用" prop="appId">
          <el-select v-model="form.appId" placeholder="请选择应用">
            <el-option v-for="(op, index) in appsList" :key="index" :label="op.app_name" :value="op.id"></el-option>
          </el-select>
        </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="所属签名" prop="signId">
          <el-select v-model="form.signId" placeholder="请选择签名">
            <el-option v-for="(op, index) in signaturesList" :key="index" :label="op.signature_name" :value="op.id"></el-option>
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="模版内容" prop="templateContent"  >
          <el-input v-model="form.templateContent" type="textarea" show-word-limit maxlength="500" :rows="10" placeholder="支持变量名：${名称}、${时间}、${内容}&#10;示例：尊敬的用户${名称}，您在${时间}的内容为${内容}，感谢您使用平台！"/>
        </el-form-item>
        <el-form-item>
          <div class="helper-text">
            最大消息字数:0 最大拆分条数:1 计算规则
            验证码模版仅支持验证码作为变量，内容必须包含验证码，注册码，校验码，动志码4个词之
            推广类模版必须包含退订方式，需要在尾部添加“拒收请回复R”
            为避免模板审核不通过，请务必详细阅读模板和变量规范，查看模板示例后再填写
          </div>
        </el-form-item>
        <el-form-item label="申请说明" prop="templateDesc" >
          <el-input v-model="form.templateDesc" type="textarea" show-word-limit maxlength="100" :rows="4" placeholder="请描述您的业务使用场景"/>
        </el-form-item>
        <el-form-item>
          <div class="helper-text">
            每日24小时审核服务，审核时间1-2日内(09:00-18:00 GMT+08:00)（法定节假日顺延）。
            若长期未审核通过的原因，建议您先检查模板内容是否合规，如有疑问请联系客服。
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


export default {
  name: 'SmsHwTemplate',
  dicts: ['sms_template_status','sms_urge_status'],
  data() {
    return {
      total: 0,
      loading: false,
      selectAll: false,
      title: "",
      // 是否显示弹出层
      open: false,
      HwSmsTemplateResp: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      filters: {
        status: '',
        startDate: '',
        endDate: '',
        searchType: 'name',
        searchText: ''
      },
      templates: [
        {
          id: 1,
          selected: false,
          name: '杭云通知提醒',
          themeId: '950df530-e337-...',
          templateId: '2eccb757f80d4...',
          application: 'fangcloud',
          space: '浙江杭云网络科...',
          type: '通知类',
          createTime: '2024/10/25 20:2...',
          status: 'active',
          reviewStatus: '无催审',
          reviewTime: '',
          reviewNote: ''
        },
        // Add more template data as needed
      ],
      // 查询参数
      queryParams: {
        offset: 1,
        limit: 10,
        starTime: null,
        templateId: null,
        endTime: null,
        templateName: null,
        templateType: null,
        flowStatus: null,
        hasVariable:null,

      },
      formData: {
        name: '',
        group: '',
        application: '',
        space: '',
        content: '',
        description: ''
      },
      fromGroup: [
        { id: 1, name: '分组1' },
        { id: 2, name: '分组2' }
      ],
      applications: [
        { id: 1, name: '应用1' },
        { id: 2, name: '应用2' }
      ],
      spaces: [
        { id: 1, name: '空间1' },
        { id: 2, name: '空间2' }
      ],
      appsList:[],
      signaturesList:[],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        templateName: [
          { required: true, message: "模板名称不能为空", trigger: "blur" }
        ],
        templateType: [
          { required: true, message: "模板类型不能为空", trigger: "blur" }
        ],
        appId: [
          { required: true, message: "所属应用不能为空", trigger: "blur" }
        ],
        signId: [
          { required: true, message: "所属签名不能为空", trigger: "blur" }
        ],
        templateContent: [
          { required: true, message: "模板内容不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.getList();
    this.getAppsList();
    this.getSignatures();
  },
  methods: {
    getList() {
      this.loading = true;
      this.loading = false;

    },
    getAppsList() {
      this.loading = true;
      this.loading = false;
    },

    getSignatures() {
      this.loading = true;
      this.loading = false;
    },
    toggleSelectAll() {
      this.templates.forEach(template => {
        template.selected = this.selectAll
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加消息模板";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除该数据项？').then(function() {
        return delHwTemplate(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getHwTemplate(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改邮箱通道";
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        templateName: null,
        templateType: null,
        appId: null,
        signId: null,
        templateContent: null,
        templateDesc: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {

      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateHwTemplate(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addHwTemplate(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
  }
}
</script>

<style scoped>
.template-management {
  padding: 8px;
}

.info-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  margin-bottom: 20px;
}

.help-icon {
  color: #1890ff;
  cursor: pointer;
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tab-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-button {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
}

.tab-button.active {
  color: #fff;
  background: #cc0000;
  border-radius: 4px;
}

.quota-text {
  color: #666;
  margin-right: 8px;
  font-size: 14px;
}

.action-button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
}

.action-button.outline {
  border: 1px solid #d9d9d9;
  background: white;
}

.action-button.primary {
  background: #1890ff;
  color: white;
  border: none;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-group {
  display: flex;
  gap: 16px;
  align-items: center;
}

.filter-select {
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  min-width: 120px;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-input {
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.search-container {
  display: flex;
  gap: 8px;
}

.search-input-container {
  display: flex;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
}

.search-input {
  padding: 8px;
  border: none;
  outline: none;
  min-width: 200px;
}

.search-button {
  padding: 8px 16px;
  background: none;
  border: none;
  border-left: 1px solid #d9d9d9;
  cursor: pointer;
}

.refresh-button {
  padding: 8px;
  background: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
}

.table-container {
  background: white;
  border-radius: 4px;
  overflow-x: auto;
}

.template-table {
  width: 100%;
  border-collapse: collapse;
}

.template-table th,
.template-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.template-table th {
  background: #fafafa;
  font-weight: normal;
  color: #666;
}

.checkbox-column {
  width: 48px;
}

.expandable {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.status-badge.success {
  color: #52c41a;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.actions-column {
  display: flex;
  gap: 8px;
}

.action-link {
  color: #1890ff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.more-actions {
  position: relative;
}
.helper-text {
  margin-top: 8px;
  color: #909399;
  font-size: 13px;
  line-height: 1.4;
}
</style>
